<template>
  <div id="model_list">
    <div class="router_view_header">
      <h1>Model 列表</h1>
      <el-button type="primary" @click="handleCreate()">创建新 Model</el-button>
    </div>
    <el-table stripe :data="modelList">
      <el-table-column prop="name" label="名称"/>
      <el-table-column prop="dbSchema" label="Schema"/>
      <el-table-column prop="dbTable" label="表名"/>
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button plain size="small" @click="handleView(scope.row)">查看</el-button>
          <el-button type="primary" plain size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" plain size="small" @click="handleRemove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handlePageChange"
      :current-page="page"
      :page-sizes="[10]"
      :page-size="10"
      layout="total, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <error-alert :errorMessage="errorMessage" @ok="errorOk"/>
  </div>
</template>

<script>
import http from '../util/http.js';
import elementTable from '../plugins/element/table.js';
import elementButton from '../plugins/element/button.js';
import elementPagination from '../plugins/element/pagination.js';

import ErrorAlert from "../components/ErrorAlert.vue";

const component = {
  name: "model_list",
  data() {
    return {
      total: 0,
      totalPages: 1,
      modelList: [],
      page: 1,

      errorMessage: ""
    };
  },
  created() {
    this.listModels();
  },
  methods: {
    listModels() {
      this.$store.commit("setLoading");
      http.get( http.receiveJSON({
        url: "/managed-bean/0",
        params: {
          page: this.page - 1,
          size: 10
        }
      }) ).then(response => {
        if (response.data.code === 'ok') {
          const content = response.data.content;
          this.modelList = content.content;
          this.totalPages = content.totalPages;
          this.total = content.totalElements;
          this.$store.commit("unsetLoading");
        } else {
          this.errorMessage = response.data.msg;
        }
      }).catch((ex) => {
        console.error(ex);
        this.$store.commit("unsetLoading");
        this.errorMessage = "查询 Model 列表出错";
      });
    },
    handlePageChange(page) {
      this.page = page;
      this.listModels();
    },
    canEdit(row) {
      for (const type of ["OWNER", "ADMIN", "EDITOR"]) {
        if (this.$store.beanPermissions.contains(type + ":" + row.id)) {
          return true;
        }
      }
      return false;
    },
    handleCreate() {
      this.$router.push({
        name: "model_edit",
        params: { id: "", name: "", dbSchema: "", dbTable: "" }
      });
    },
    handleEdit(row) {
      this.$router.push({
        name: "model_edit",
        params: { id: row.id, name: row.name, dbSchema: row.dbSchema, dbTable: row.dbTable }
      });
    },
    handleRemove(row) {
      console.log(row);
    },
    handleView(row) {
      this.$router.push({
        name: "bean_list",
        query: { id: row.id, name: row.name }
      });
    },

    errorOk() {
      this.errorMessage = "";
    }
  },
  components: {
    ErrorAlert
  }
};

elementTable(component);
elementButton(component);
elementPagination(component);

export default component;
</script>
